<template>
  <view class="takeone">
    <!-- 没数据 -->
    <view class="undefine" v-if="arr == ''">
      <view class="notData">
        <image src="../../static/take/tea.png" mode=""></image>
        <view>您还没有点单</view>
        <view>快去犒劳一下自己吧~</view>
        <view>
          <button class="but" @click="toorder()">去点餐</button>
        </view>
        <view class="look" @click="tohistory()">查看历史订单</view>
      </view>
    </view>

    <view class="order" v-else>
      <view class="shop margin">
        <view class="shop_name">福永同泰时代城店</view>
        <view class="positioning">
          <view class="phone">
            <image src="../../static/user/phone.png" mode=""></image>
          </view>
          <view class="position phone">
            <image src="../../static/user/daohang.png" mode=""></image>
          </view>
        </view>
      </view>
      <view class="order-item margin">
        <view class="order-num">{{ num }}</view>
        <view class="process">
          <view class="process-top">
            <image src="../../static/user/take.png" mode=""></image>
            <image src="../../static/user/zhizuo.png" mode=""></image>
            <image src="../../static/user/qucan.png" mode=""></image>
          </view>
          <view class="process-bottom process-top">
            <view class="">已下单</view>
            <view class="">----</view>
            <view class="">制作中</view>
            <view class="">----</view>
            <view class="">请取餐</view>
          </view>
        </view>
        <view class="wait"
          >您前面还有 <text> {{ num1 }} </text> 单待制作</view
        >
        <view class="shop-order-item">
          <view class="shop-order-item-top">
            <view class="milkTea">
              <view class="">霸气葡萄</view>
              <view class="illustrate">去冰,标准糖</view>
            </view>
            <view class="price">
              <view class="">×1</view>
              <view class="money">￥28.00</view>
            </view>
          </view>
          <view class="shop-order-item-top">
            <view class="milkTea">
              <view class="">霸气葡萄</view>
              <view class="illustrate">标准糖,标准冰</view>
            </view>
            <view class="price">
              <view class="">×1</view>
              <view class="money">￥22.00</view>
            </view>
          </view>
        </view>
      </view>
      <view class="way order">
        <view class="way-item">
          <view class="">支付方式</view>
          <view class="way-view">微信支付</view>
        </view>
        <view class="way-item">
          <view class="">金额总计</view>
          <view class="way-view">￥50.00</view>
        </view>
      </view>
      <view class="way order">
        <view class="way-item">
          <view class="">下单时间</view>
          <view class="way-view">2020-05-08 19:19:42</view>
        </view>
        <view class="way-item">
          <view class="">下单门店</view>
          <view class="way-view">福永同泰时代城店</view>
        </view>
        <view class="way-item">
          <view class="">支付方式</view>
          <view class="way-view">微信支付</view>
        </view>
        <view class="way-item">
          <view class="">订单号</view>
          <view class="way-view">ABCDEFGHIKLMN0001</view>
        </view>
      </view>
      <view class="way order">
        <view class="way-item">
          <view class="">取单号</view>
          <view class="way-view">8093</view>
        </view>
        <view class="way-item">
          <view class="">享用方式</view>
          <view class="way-view">自取</view>
        </view>
        <view class="way-item">
          <view class="">取餐时间</view>
          <view class="way-view">立即取餐</view>
        </view>
        <view class="way-item">
          <view class="">完成制作时间</view>
          <view class="way-view">2020-05-08 19:24:37</view>
        </view>
        <view class="way-item">
          <view class="">备注</view>
          <view class="way-view">打包</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      num: 8093,
      num1: 4,
      arr: [], //数据
    };
  },
  methods: {
    tohistory() {
      uni.navigateTo({
        url: "/pages/order/history",
      });
    },
    toorder() {
      uni.switchTab({
        url: "/pages/order/order",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f0f8fa;
}
.takeone {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f0f8fa;
}
.but {
  border-radius: 50rpx;
}
.notData {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #a6a8aa;
  background-color: #F0F8FA;

  image {
    width: 250rpx;
    height: 250rpx;
    margin-bottom: 40rpx;
  }

  button {
    width: 50%;
    background-color: #adb838;
    color: #fff;
    margin: 40rpx auto;
  }

  .look {
    color: #adb838;
  }
}

.order {
  width: 95%;
  margin: 20rpx auto;
  box-sizing: border-box;
  background-color: #fff;

  .margin {
    padding: 0 30rpx;
  }

  .shop {
    height: 120rpx;
    box-sizing: border-box;
    color: #707173;
    line-height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 4rpx solid #f1f1f1;
    width: 100%;

    .positioning {
      display: flex;

      .phone {
        width: 65rpx;
        height: 65rpx;
        line-height: 65rpx;
        text-align: center;
        border-radius: 50%;
        background-color: #e8ecc4;
        margin: 0 20rpx;
      }

      image {
        width: 40rpx;
        height: 40rpx;
        margin-top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .order-item {
    padding-top: 100rpx;
    border-bottom: 4rpx solid #f1f1f1;

    .order-num {
      text-align: center;
      font-size: 80rpx;
      color: #5a5b5d;
      font-weight: bold;
      padding-bottom: 100rpx;
    }

    .process {
      text-align: center;

      .process-top {
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 85rpx;
          height: 85rpx;
          margin: 0 50rpx;
        }
      }

      .process-bottom {
        padding-top: 20rpx;

        view {
          margin: 0 8rpx;
          color: #919294;
        }

        view:nth-child(1) {
          font-weight: bold;
        }
      }
    }

    .wait {
      text-align: center;
      color: #919294;
      padding: 40rpx 0;

      text {
        color: #bac876;
      }
    }

    .shop-order-item {
      padding-bottom: 20rpx;

      .shop-order-item-top {
        margin-bottom: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .milkTea {
          width: 65%;
          color: #7a7a7c;

          .illustrate {
            font-size: 26rpx;
            color: #939799;
          }
        }

        .price {
          width: 35%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .money {
            font-weight: bold;
            color: #5a5b5d;
          }
        }
      }
    }
  }

  .way {
    padding: 20rpx 0;
    border-bottom: 4rpx solid #f1f1f1;

    .way-item {
      display: flex;
      justify-content: space-between;
      padding-bottom: 25rpx;
      color: #5a5b5d;

      .way-view {
        font-weight: bold;
      }
    }
  }
}
</style>
